import React, {useState} from 'react';
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import {goalImages} from '../../../../../assets/constants/data/data'
import {useDispatch, useSelector} from "react-redux";
import {selectDeselectGoal} from "../../../../../redux/reducers/gqiEditor";
import {scrollToTop} from "../../../../../assets/functions/functions";
import Button from "@material-ui/core/Button";
import {Card, CardActions, CardContent, CardMedia, Checkbox, FormControlLabel} from "@material-ui/core";
import {makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  details: {
    display: "flex",
    flexDirection: "column"
  },
  content: {
    flex: "1 0 auto"
  },
  cover: {
    minWidth: 220,
    // minHeight: 220
  },
  checkbox: {
    marginLeft: theme.spacing(2)
  },
  gutter: {
    margin: theme.spacing(2, 0, 2, 0)
  },
  gutterBottom: {
    margin: theme.spacing(0, 0, 2, 0)
  }
}));

export default function Goal(props) {
  // Props
  const {handleStepForward} = props

  // Constants from Redux Store
  const activeGoalsData = useSelector((state) => state.gqiEditor.fetchedData.activeGoals);
  const selectedGoal = useSelector((state) => state.gqiEditor.selectedData.goal);

  // Local constants
  const [checked, setChecked] = useState(Object.keys(selectedGoal).length !== 0);
  const [goalData, setGoalData] = useState(Object.keys(selectedGoal).length !== 0 ? [selectedGoal] : activeGoalsData);
  const [hover, setHover] = useState(false);
  const styles = useStyles();
  const dispatch = useDispatch();

  const handleSelectGoal = (data) => {
    if (!checked) {
      setGoalData([data]);
      dispatch(selectDeselectGoal(data));
      scrollToTop();
    } else {
      setGoalData(activeGoalsData);
      dispatch(selectDeselectGoal({}));
    }
    setChecked(!checked);
  };


  return (
    <>
      <Grid container justify="space-between" alignItems="center" className={styles.gutterBottom}>
        <Typography variant='body1'>Select a goal for your analysis</Typography>
        {/*<Button startIcon={<FontAwesomeIcon icon={faPlus}/>} disabled> Request new goal </Button>*/}
      </Grid>

      <Grid container direction="column" spacing={3}>
        {goalData.map(goal => {
          let imageLink = "";
          goalImages.forEach(image => {
            if (goal.name === image.name)
              imageLink = image.image;
          })
          return (
            <>
              <Grid item lg={9} key={goal.id}>
                <Card className={styles.root} raised={hover === goal.id}
                      onMouseEnter={() => setHover(goal.id)}
                      onMouseLeave={() => setHover(false)}>
                  <CardActions>
                    <FormControlLabel
                      className={styles.checkbox}
                      control={
                        <Checkbox
                          checked={checked}
                          onChange={() => handleSelectGoal(goal)}
                          name="checked"
                          color="primary"
                        />
                      }/>
                  </CardActions>
                  <CardMedia
                    className={styles.cover}
                    image={imageLink}
                    title="Goal image"
                  />
                  <div className={styles.details}>
                    <CardContent className={styles.content}>
                      <Typography variant="h5"> {goal.name} </Typography>
                      <Typography variant="subtitle1" color="textSecondary"> {goal.description} </Typography>
                    </CardContent>
                  </div>
                </Card>
              </Grid>
            </>
          )
        })}
      </Grid>

      <Grid container className={styles.gutter}>
        <Grid item>
          <Button variant="contained" color="primary"
                  disabled={Object.keys(selectedGoal).length === 0}
                  onClick={() => handleStepForward(1)}>
            Next
          </Button>
        </Grid>
      </Grid>
    </>
  )
}
